<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<div class="am-cf am-padding">
    <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">角色管理</strong><%-- / <small>Table</small>--%></div>
</div>
<div class="am-g">
    <div class="am-u-sm-12">
        <form class="am-form" action="a.html">
            <table class="am-table am-table-striped am-table-hover table-main">
                <thead>
                <tr>
                    <th class="table-id">NO</th>
                    <th class="table-title">角色名称</th>
                    <th class="table-set">操作</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach items="${roles}" var="role" varStatus="status">
                <tr>
                    <td>${status.index+1}</td>
                    <td>${role.name}</td>
                    <td>
                        <div class="am-btn-toolbar">
                            <div class="am-btn-group am-btn-group-xs">
                                <button type="button" class="am-btn am-btn-default am-btn-xs am-text-secondary"
                                        data-am-modal="{target: '#modal-1', closeViaDimmer: 0}">
                                    <span class="am-icon-pencil-square-o"></span> 编辑
                                </button>
                            </div>
                        </div>
                    </td>
                </tr>
                </c:forEach>
                </tbody>
            </table>

        </form>
        <!--
        modal
        -->
        <div class="am-modal am-modal-no-btn" tabindex="-1" id="modal-1">
            <div class="am-modal-dialog">

                <div class="am-modal-hd">编辑
                    <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
                </div>
                <div class="am-modal-bd" style="padding-right: 20px;">
                    <form class="am-form">
                        <div class="am-g am-margin-top-sm">
                            <div class="am-u-sm-3 am-text-right">
                                SEO 标题
                            </div>
                            <div class="am-u-sm-9 am-u-end">
                                <input type="text" class="am-input-sm">
                            </div>
                        </div>

                        <div class="am-g am-margin-top-sm">
                            <div class="am-u-sm-3 am-text-right">
                                SEO 关键字
                            </div>
                            <div class="am-u-sm-9 am-u-end">
                                <input type="text" class="am-input-sm">
                            </div>
                        </div>

                        <div class="am-g am-margin-top-sm">
                            <div class="am-u-sm-3 am-text-right">
                                SEO 描述
                            </div>
                            <div class="am-u-sm-9 am-u-end">
                                <textarea rows="4"></textarea>
                            </div>
                        </div>
                    </form>
                    <div class="am-margin">
                        <button class="am-btn am-btn-primary am-btn-xs" type="button">提交保存</button>
                        <button class="am-btn am-btn-primary am-btn-xs" type="button">放弃保存</button>
                    </div>
                </div>


            </div>
        </div>

    </div>

</div>
